<template>
  <div class="containers">
    <div class="containers-select">
      <div class="containers-select-province">
        <h3>按省份选择:</h3>
        <div @click.self="selectProvince" class="province">
          <span>{{province}}</span>
          <i class="iconfont iconfont-one">&#xe655;</i>
          <div v-show="showProvinceList" class="province-list">
            <p class="province-list-title">省份</p>
            <div class="province-list-content">
              <div class="column">
                <span :class="{active: item.active}" @click="clickProvince(item.index)" v-for="(item, index) of provinceData.slice(0, 12)" :key="index">{{item.province}}</span>
              </div>
              <div class="column">
                <span :class="{active: item.active}" @click="clickProvince(item.index)" v-for="(item, index) of provinceData.slice(12, 24)" :key="index">{{item.province}}</span>
              </div>
              <div class="column">
                <span :class="{active: item.active}" @click="clickProvince(item.index)" v-for="(item, index) of provinceData.slice(24)" :key="index">{{item.province}}</span>
              </div>
            </div>
          </div>
        </div>
        <div @click.self="selectCity" class="city">
          <span>{{city}}</span>
          <i class="iconfont iconfont-one">&#xe655;</i>
          <div v-show="showCityList" class="province-list">
            <p class="province-list-title">城市</p>
            <div class="province-list-content">
              <div v-for="(item, index) of cityInfo" :key="index" class="column">
                <span  @click="clickCity(index, indexs)" v-for="(items, indexs) of item" :key="indexs">{{items.citysName}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="containers-search">
      <div class="containers-select-province">
        <h3>直接搜索:</h3>
        <div class="input-container">
          <input @blur="inputBlur" placeholder="请输入中文城市或拼音" v-model="content" type="text">
          <i class="iconfont iconfont-one">&#xe655;</i>
          <div @mouseenter="enterSearch" @mouseleave="leaveSearch" v-show="showSearchList" class="search-container">
            <span @click="searchCityChange(index)" v-for="(item, index) of searchList" :key="index">{{item}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchCity',
  data() {
    return {
      content: '',
      /** 省份 */
      province: '省份',
      /** 城市 */
      city: '城市',
      /** 控制展示省份列表 */
      showProvinceList: false,
      /** 控制城市列表的展示 */
      showCityList: false,
      /** 展示查询城市列表的展示 */
      showSearchList: false,
      /** 城市列表 */
      cityInfo: [],
      /** 当鼠标移入查询的列表框在进行点击不视为失焦条件 */
      enter: false
    }
  },
  props: {
    /** 省份信息 */
    provinceData: {
      type: Array,
      default() {
        return []
      }
    },
    /** 市信息 */
    cityData: {
      type: Array,
      default() {
        return []
      }
    },
    /** 搜索的省市信息 */
    searchList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    /** 把数组分成等份 */
    sliceArray(array, size) {
      let result = []
      for (let x = 0; x < Math.ceil(array.length / size); x++) {
        let start = x * size
        let end = start + size
        result.push(array.slice(start, end))
      }
      return result
    },
    /** 点击列表中的省份 */
    clickProvince(indexs) {
      this.city = '城市'
      this.provinceData.forEach((item, index) => {
        index === indexs ? 
          item.active = true : 
          item.active = false
      })
      this.province = this.provinceData[indexs].province
      this.showProvinceList = false
      this.$emit('findCity', this.province)
    },
    /** 点击列表中的城市 */
    clickCity(index, indexs) {
      let name = this.cityInfo[index][indexs]['citysName']
      this.city = name
      this.showCityList = false
      this.$store.dispatch('changeCity', {
        province: this.province,
        city: this.city
      })
      this.$emit('saveCityRecord', this.city)
      this.$router.push('/')
    },
    /** 点击选择省 */
    selectProvince() {
      this.showProvinceList = true
      this.showCityList = false
    },
    /** 点击选择城市 */
    selectCity() {
      this.showCityList = true
      this.showProvinceList = false
    },
    /** 节流 */
    debounce(func, delay) {
      let timer
      return (...args) => {
        if (timer) clearTimeout(time)
        timer = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    },
    /** 搜索城市直接进行切换 */
    searchCityChange(index) {
      let name = this.searchList[index]
      this.$store.dispatch('onlyChangeCity', name)
      this.$emit('saveCityRecord', name)
      this.$router.push('/')
    },
    /** 失焦 */
    inputBlur() {
      !this.enter ? this.showSearchList = false : ''
    },
    /** 鼠标移入查询列表框 */
    enterSearch() {
      this.enter = true
    },
    /** 移出0 */
    leaveSearch() {
      this.enter = false
    }
  },
  watch: {
    cityData(newVal) {
      this.cityInfo = this.sliceArray(newVal, 12)
    },
    content() {
      this.debounce(() => {
        this.$emit('searchData', this.content)
      }, 500)()
    },
    searchList(newVal) {
      if (newVal.length > 0) {
        this.showSearchList = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.containers {
  display: flex;
  background-color: #fff;
  width: 100%;
  &-select {
    padding-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
    background-color: #fff;
    &-province {
      display: flex;
      align-items: center;
      h3 {
        font-size: 16px;
        color: #333;
        font-weight: 500;
        margin-top: 2px;
      }
      .province {
        padding: 10px 0 10px 10px;
        cursor: pointer;
        border-radius: 4px;
        vertical-align: middle;
        display: inline-block;
        width: 150px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid #E5E5E5;
        margin: 0 10px 0 20px;
        position: relative;
        font-size: 14px;
        color: #666;
        .iconfont-one {
          position: absolute;
          right: 7px;
          top: 50%;
          transform: translateY(-48%);
          font-size: 13px;
          color: #666;
        }
        &-list {
          position: absolute;
          cursor: default;
          top: 45px;
          left: 0;
          width: 264px;
          height: 375px;
          padding: 20px 0 20px 15px;
          box-sizing: border-box;
          background-color: #fff;
          border: 1px solid #E5E5E5;
          box-shadow: 0 3px 5px 0 rgba(0,0,0,0.10);
          border-radius: 4px;
          &::before {
            content: "";
            position: absolute;
            top: -7px;
            left: 26px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #E5E5E5;
            border-top: 0;
          }
          &::after {
            content: "";
            position: absolute;
            top: -5px;
            left: 26px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff;
            border-top: 0;
          }
          &-title {
            font-size: 16px;
            color: #CCC;
            margin-bottom: 11px;
          }
          &-content {
            display: flex;
            .column {
              span {
                cursor: pointer;
                font-size: 12px;
                color: #666;
                display: table;
                box-sizing: border-box;
                min-width: 40px;
                height: 20px;
                padding: 1px 8px;
                margin: 6px 38px 6px 0;
                &:hover {
                  border-radius: 10px;
                  background: #F4F4F4;
                }
              }
              .active {
                background: linear-gradient(to bottom right,#FFD000,#FFBD00);
                border-radius: 10px;
                color: #222222;
              }
            }
          }
        }
      }
      .city {
        @extend .province;
        .province-list {
          min-width: 150px;
          width: auto;
          &-content {
            display: table-row;
            .column {
              display: table-cell;
              span {
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
  &-search {
    flex: 1;
    padding-left: 40px;
    @extend .containers-select;
    .containers-select-province {
      .input-container {
        position: relative;
        input {
          padding-left: 10px;
          width: 220px;
          height: 40px;
          border-radius: 4px;
          border: 1px solid #E5E5E5;
          margin-left: 10px;
          font-size: 14px;
          color: #666;
          box-sizing: border-box;
        }
        .iconfont-one {
          position: absolute;
          top: 50%;
          transform: translateY(-48%);
          right: 7px;
          font-size: 13px;
          color: #666;
        }
        .search-container {
          position: absolute;
          cursor: default;
          top: 47px;
          left: 12px;
          border-radius: 4px;
          overflow-y: auto;
          min-width: 150px;
          max-height: 375px;
          padding: 0 20px 0 15px;
          box-sizing: border-box;
          background-color: #fff;
          border: 1px solid #E5E5E5;
          border-radius: 4px;
          box-shadow: 0 3px 5px 0 rgba(0,0,0,0.10);
          &::before {
            content: "";
            position: absolute;
            top: -6px;
            left: 26px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #E5E5E5;
            border-top: 0;
          }
          &::after {
            content: "";
            position: absolute;
            top: -5px;
            left: 26px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #fff;
            border-top: 0;
          }
          span {
            cursor: pointer;
            font-size: 12px;
            color: #666;
            display: block;
            box-sizing: border-box;
            min-width: 40px;
            height: 20px;
            padding: 1px 8px;
            margin: 6px 38px 6px 0;
            white-space: nowrap;
            &:hover {
              color: #222222;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>